<template>
	<view class="container">
		<view class="list-item-box">
			<view class="list-item">
				<view class="college-info">
					<view class="college-avatar">
						<image mode="aspectFit" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fs3.sinaimg.cn%2Fmiddle%2F001lU6Czty72EWFjFbI32%26690&refer=http%3A%2F%2Fs3.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1613787000&t=6fb1d06825197da568d4d3bc6db1ebd0"></image>
					</view>
					<view class="college-name-label">
						<view class="college-name">郑州大学</view>
						<view class="college-label-box">
							<view class="college-label">本科</view>
							<view class="college-label">双一流</view>
							<view class="college-label">研究生</view>
						</view>
					</view>
				</view>
				<view class="college-arrow">
					<image mode="widthFix" src="../../static/images/14x24.png"></image>
				</view>
			</view>
		</view>
		<view class="list-item-box">
			<view class="list-item">
				<view class="college-info">
					<view class="college-avatar">
						<image mode="aspectFit" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fs3.sinaimg.cn%2Fmiddle%2F001lU6Czty72EWFjFbI32%26690&refer=http%3A%2F%2Fs3.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1613787000&t=6fb1d06825197da568d4d3bc6db1ebd0"></image>
					</view>
					<view class="college-name-label">
						<view class="college-name">郑州大学</view>
						<view class="college-label-box">
							<view class="college-label">本科</view>
							<view class="college-label">双一流</view>
							<view class="college-label">研究生</view>
						</view>
					</view>
				</view>
				<view class="college-arrow">
					<image mode="widthFix" src="../../static/images/14x24.png"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
</script>

<style>
	page {
		background-color: #f6f7fb;
	}
	
	.container {
		width: 750rpx;
	}
	
	.list-item-box {
		width: 750rpx;
		height: 180rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		background-color: #ffffff;
		margin-top: 20rpx;
	}
	
	.list-item {
		width: 654rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	
	.college-info {
		width: 370rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	
	.college-avatar {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	
	.college-avatar image {
		width: 120rpx;
		height: 120rpx;
	}
	
	.college-label-box {
		display: flex;
		flex-direction: row;
		margin-top: 14rpx;
	}
	
	.college-arrow {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	
	.college-arrow image {
		width: 14rpx;
	}
	
	.college-name-label {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	
	.college-name {
		color: #333333;
		font-size: 30rpx;
	}
	
	.college-label {
		color: #f1882b;
		padding-left: 6rpx;
		padding-right: 6rpx;
		border: 2rpx solid #f1882b;
		font-size: 20rpx;
		margin-right: 8rpx;
	}
</style>
